<!-- 物料台账 -->
<template>
  <div class="app-container">
    <div class="cardBox">
      <leftTree ref="leftTree" :data="treeData" node-key="id" :default-props="defaultProps" search-key="wmsName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />
      <el-col id="right-content" class="right-content" :offset="0" :span="18">
        <div class="box-title">
          <el-breadcrumb separator="/" style="line-height:50px;">
            <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="topSearch">
          <el-input v-if="activeName == 1" v-model="search.keyword" placeholder="请输入关键字进行搜索" clearable @keyup.enter.native="getTableInfo()" @clear="getTableInfo()">
            <el-button slot="append" icon="el-icon-search" @click="getTableInfo()" />
          </el-input>
          <ImportFile v-if="activeName == 1" class="importFile" url="/wms/inventory/import" @getTableInfo="getTableInfo" />
          <span class="btnDisplay">
            <el-button type="primary" icon="el-icon-plus" class="addInfo btnDis" @click="showDialog">新增</el-button>
          </span>
        </div>
        <el-tabs v-model="activeName" class="tabsPane" type="card" tab-position="top" style="height:calc(100% - 40px);" @tab-click="tabClick">
          <el-tab-pane name="1">
            <span slot="label">
              <i class="el-icon-s-grid" /> 表格
            </span>
            <el-row class="table">
              <el-table v-loading="loading" :data="tableData" ref="tableData" stripe border>
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column align="center" type="index" label="索引" width="60px" />
                <el-table-column v-for="item in fieldList" :key="item.id" :align="item.align || 'left'" :prop="item.code.split(':')[1]" :label="item.val" :min-width="item.width + 'px'" show-overflow-tooltip />
                <el-table-column label="操作" fixed="right" align="center" width="100px">
                  <template #default="{ row }">
                    <el-button-group>
                      <el-button type="text" @click="showDialog(row)">
                        <i class="iconfont icon-search"></i>
                      </el-button>
                      <!-- <el-button type="danger" icon="el-icon-delete" @click="deleteRow(row)" /> -->
                    </el-button-group>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <el-row class="numRight" v-if="JSON.stringify(num) !== '{}'">
              <div class="numRightDiv">
                <i class="iconfont icon-jisuanqi1"></i>
                <span>总数量:</span>
                <b>{{ num.statNum }}</b>
                <span>总金额:</span>
                <b>{{ num.statPrice }}</b>
              </div>
            </el-row>
            <el-row>
              <div class="table-btn-box">
                <el-button @click="
                      () => {
                        tableData.forEach(row => {
                          $refs['tableData'].toggleRowSelection(row, true)
                        })
                      }
                    ">选择全部</el-button>
                <el-button @click="
                      () => {
                        tableData.forEach(row => {
                          $refs['tableData'].toggleRowSelection(row)
                        })
                      }
                    ">反向选择</el-button>
                <el-button @click="numGet()">
                  统计
                  <i class="iconfont icon-jisuanqi1" style="font-size:13px;"></i>
                </el-button>
                <el-button>
                  更多菜单
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
              </div>
              <pagination ref="Pagination" :total="total" :current.sync="search.current" :size.sync="search.size" @pagination="getTableInfo" />
            </el-row>
          </el-tab-pane>
          <el-tab-pane name="2">
            <span slot="label">
              <i class="el-icon-s-grid" /> 库存图
            </span>
            <div class="chart-container">
              <component :is="chart" ref="MixChart" height="100%" width="100%" :table-data="tableData" />
            </div>
          </el-tab-pane>
          <el-tab-pane name="3">
            <span slot="label">
              <i class="el-icon-s-grid" /> 单价图
            </span>
            <div class="chart-container">
              <component :is="chartD" ref="PriceMixChart" height="100%" width="100%" :table-data="tableData" />
            </div>
          </el-tab-pane>
          <el-tab-pane name="4">
            <span slot="label">
              <i class="el-icon-s-grid" /> 总额统计
            </span>
            <div class="chart-container">
              <component :is="chartP" ref="TotalPriceMixChart" height="100%" width="100%" :table-data="tableData" />
            </div>
          </el-tab-pane>
          <el-tab-pane name="5">
            <span slot="label">
              <i class="el-icon-s-grid" /> 金额图
            </span>
            <div class="chart-container">
              <component :is="chartM" ref="LineChart" height="100%" width="100%" :table-data="tableData" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </div>
    <!-- 新增编辑 -->
    <addAndModify ref="addAndModify" :wms-list-all="treeData" :material-list="materialList" @getTableInfo="getTableInfo" />
  </div>
</template>
<script>
import { getMaterialListApi } from '@/api/public'
import ImportFile from '@/components/ImportFile'
import Pagination from '@/components/Pagination'
import MixChart from '@/components/Charts/MixChart'
import LineChart from '@/components/Charts/LineChart'
import TotalPriceMixChart from '@/components/Charts/TotalPriceMixChart'
import PriceMixChart from '@/components/Charts/PriceMixChart'
import addAndModify from './components'
import leftTree from '@/components/LeftTree'
export default {
  components: {
    leftTree,
    ImportFile,
    Pagination,
    MixChart,
    LineChart,
    addAndModify,
    PriceMixChart,
    TotalPriceMixChart
  },
  data() {
    return {
      num: {},
      search: {
        current: 1,
        size: 20,
        keyword: '',
        treeStr: '-1'
      },
      total: 0,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'wmsName'
      },
      tableData: [],
      defaultExpandKeys: ['-1'],
      breadcrumb: ['库房库位'],
      loading: false,
      activeName: '1',
      chart: '',
      chartM: '',
      chartD: '',
      chartP: '',
      materialList: []
    }
  },
  computed: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {},
  async mounted() {
    await this.getTableInfo()
    await this.getMaterialAll()
    await this.getWmsList()
  },
  methods: {
    /**
     * @description: 查询所有库房库位
     * @return {*}
     */
    async getWmsList() {
      const res = await this.$axios.get('wms/list')
      if (res?.data.code === 200) {
        this.treeData = [
          { id: '-1', wmsName: '库房库位目录', children: res.data.data }
        ]
      }
    },
    /* 获取所有物料 */
    async getMaterialAll() {
      const res = await getMaterialListApi()
      if (res?.data.code === 200) {
        this.materialList = res.data.data
      }
    },
    tabClick(e) {
      console.log(e.name)
      this.getTableInfo()
    },
    /**
     * @description: 分页查询
     * @param {*} page
     * @return {*}
     */
    async getTableInfo(page = 1) {
      this.chart = ''
      this.chartM = ''
      this.chartD = ''
      this.chartP = ''
      this.search.current = page
      this.loading = true
      let url = ''
      if (this.activeName === '1') {
        url = '/wms/inventory/page'
      } else if (this.activeName === '2') {
        url = '/wms/inventory/echarts'
      } else if (this.activeName === '3') {
        url = '/wms/inventory/echarts/price'
      } else if (this.activeName === '4') {
        url = '/wms/inventory/echarts/totalPrice'
      } else {
        url = '/wms/inventory/echarts/totalPrice'
      }
      // const url = this.activeName === '1' ? '/wms/inventory/page' : ''
      if (this.activeName === '2') {
        this.chart = MixChart
      } else if (this.activeName === '3') {
        this.chartD = PriceMixChart
      } else if (this.activeName === '4') {
        this.chartP = TotalPriceMixChart
      } else if (this.activeName === '5') {
        this.chartM = LineChart
      }
      const res = await this.$axios.post(url, this.search)
      if (res?.data.code === 200) {
        if (this.activeName === '1') {
          const { list, total } = res.data.data
          this.tableData = list
          this.total = total
        } else if (this.activeName === '2') {
          this.$refs['MixChart'].initChart(res.data.data)
        } else if (this.activeName === '3') {
          this.$refs['PriceMixChart'].initChart(res.data.data)
        } else if (this.activeName === '4') {
          this.$refs['TotalPriceMixChart'].initChart(res.data.data)
        } else {
          this.$refs['LineChart'].initChart(res.data.data)
        }
        setTimeout(() => {
          this.loading = false
        }, 100)
      }
    },
    /* 统计 */
    async numGet() {
      const res2 = await this.$axios.post('/wms/inventory/stat', this.search)
      if (res2?.data.code === 200) {
        this.num = res2.data.data
      }
    },
    /**
     * @description: 树节点点击
     * @param {*} data
     * @param {*} node
     * @return {*}
     */
    handleNodeClick({ data, node }) {
      this.breadcrumb = []
      this.returnNodeLabel(node.parent)
      this.breadcrumb.push(data.wmsName)
      this.search.treeStr =
        data.wmsName === '库房库位目录' ? '-1' : data.wmsName
      this.getTableInfo()
    },
    /**
     * @description: 递归获取名称
     * @param {*} node
     * @return {*}
     */
    returnNodeLabel(node) {
      if (node.parent) {
        this.breadcrumb.unshift(node.data.wmsName)
        this.returnNodeLabel(node.parent)
      }
    },
    /* 新增编辑 */
    showDialog(row) {
      this.$refs['addAndModify'].showDialog(row)
    },
    /* 删除 */
    deleteRow(row) {
      this.$confirm(`确认删除物料【${row.materialName}】？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$axios.delete(
            `/wms/inventory/remove/${row.id}`
          )
          if (res.data.code === 200) {
            this.$notify.success('删除成功！')
            this.getTableInfo()
          } else {
            this.$notify.error(res.data.msg)
          }
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang='scss' scoped>
.btnDisplay {
  display: inline-block;
  .btnDis {
    visibility: hidden;
  }
  &:hover {
    .btnDis {
      visibility: visible;
    }
  }
}
.numRight {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  .numRightDiv {
    width: 350px;
    height: 35px;
    line-height: 30px;
    background: #f9f9f9;
    padding: 5px 8px;
    border-radius: 20px;
    box-shadow: 0px 1px 2px 0px rgb(224, 224, 224);
    i {
      padding-right: 5px;
      font-size: 15px;
    }
    span {
    }
    b {
      font-weight: normal;
      padding: 0 15px 0 5px;
      color: #1890ff;
    }
  }
}
.statisticsNum {
  position: absolute;
  right: 0;
  top: 95px;
  z-index: 999;
  b {
    font-weight: normal;
    padding: 0 10px 0 5px;
  }
}
.topSearch {
  width: 100%;
  margin: 5px 0;
  .el-input {
    width: 300px;
    z-index: 999;
  }
  .importFile {
    z-index: 999;
  }
  .addInfo {
    z-index: 999;
  }
  // .table {
  //   margin-top: 15px;
  // }
}
// .yuan {
//   width: 50px;
//   height: 50px;
//   border-radius: 50px;
//   background: chocolate;
// }
// .field-box {
//   display: 100%;
//   .el-col {
//     display: block;
//     &:nth-child(1) {
//       width: 200px;
//     }
//     &:nth-child(2) {
//       // height:calc(100vh - 200px);
//       .chart-container {
//         position: relative;
//         width: 100%;
//         height: calc(100vh - 215px);
//       }
//     }
//     .statisticsNum {
//       position: absolute;
//       right: 0;
//       top: 45px;
//       z-index: 999;
//       b {
//         font-weight: normal;
//         padding: 0 10px 0 5px;
//       }
//     }
//     .topSearch {
//       width: 100%;
//       margin-bottom: 5px;
//       // text-align: right;
//       .el-input {
//         // position: absolute;
//         // right: 200px;
//         // top: 1px;
//         width: 300px;
//         z-index: 999;
//       }
//       .importFile {
//         // position: absolute;
//         // top: 3px;
//         // right: 70px;
//         z-index: 999;
//       }
//       .addInfo {
//         // position: absolute;
//         // top: 3px;
//         // right: 0px;
//         z-index: 999;
//       }
//       .table {
//         margin-top: 15px;
//       }
//     }
//     .box-card {
//       height: 100%;
//       position: relative;
//       .el-tree {
//         padding-top: 10px;
//         height: calc(100vh - 160px);
//         overflow-y: auto;
//       }
//       &:nth-child(1) {
//         border-right: 1px solid #f1f1f1;
//         padding-right: 5px;
//       }
//       .el-breadcrumb {
//         // background-color: #edf6ff;
//         padding: 10px;
//         border-radius: 5px;
//         margin-bottom: 10px;
//       }
//     }
//   }
// }
</style>
